<template>
  <a-layout>
    <a-layout-sider :width="350">
      <div class="sidebar-container">
        <!-- 传递 SafeVideo 组件的引用 -->
        <TreeTable ref="treeTableRef" :safeVideoRef="safeVideoRef" />
      </div>
    </a-layout-sider>
    <a-layout-content >
      <div class="content-container">
        <SafeVideo class="safe-video" ref="safeVideoRef" style="width: 100%; height: 100%;float: none;" v-if="treeTableRef && treeTableRef.isVideoVisible" />
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick } from 'vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { BasicTree } from '/@/components/Tree';
import { deviceInfoTreeData } from '/@/api/safealarm/deviceInfo';
import ListView from './list.vue';
import TreeTable from './treeTable.vue';
import SafeVideo from './safevideo.vue';
import { Layout } from 'ant-design-vue';
const { Sider, Content } = Layout;

const { t } = useI18n('security_alarm.deviceInfo');
const treeCode = ref<string>('');
const treeTableRef = ref(null);
const safeVideoRef = ref(null);

onMounted(async () => {
  await nextTick();
  console.log('TreeTable 组件已挂载', treeTableRef.value);
  console.log('SafeVideo 组件引用', safeVideoRef.value);
});

function handleSelect(keys: string[]) {
  treeCode.value = keys[0];
  console.log('treeCode.value', treeCode.value);
}
</script>

<style scoped>
.sidebar-container {
  height: 90vh;
  overflow-y: auto;
  background-color: #f0f2f5;
}
.content-container {
    flex: 1;
    height: 100%;
    background: #fff;
}
.safe-video{
  float: none;
}
</style>